<template>
    <div class="homes">
        <!--    <van-nav-bar title="品质管理平台" >-->
        <!--    </van-nav-bar>-->
        <div class="contents">
            <van-swipe class="swipe" :autoplay="3000" lazy-render>
                <van-swipe-item v-for="image in images" :key="image">
                    <img class="swipe-img" :src="image" />
                </van-swipe-item>
            </van-swipe>
            <div class="marquee-back">
                <Vue3Marquee class="marquee">
                    <div class="paomadeng">{{ msg }}</div>
                </Vue3Marquee>
                <van-icon class="icon" name="close" size="12" color="gray" />
            </div>
            <div class="list">
                <div class="section" v-for="(item, index) in menu" :key="index">
                    <div class="section-title">
                        <van-divider>{{ item.title }}</van-divider>
                    </div>
                    <div class="section-item">
                        <div class="item" @click="toList(iItem.type)" v-for="(iItem, iIndex) in item.list" :key="iIndex">
                            <img :src="getAssetsFile(iItem.img)" style="width: 44px;height: 44px;margin-top: 10px;">
                            <div class="title">{{ iItem.title }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import "@/api/index"
import GetNetUtil from "../../../utils/GetNetUtil"
// import {start} from "@popperjs/core"
import { ref, reactive, toRefs } from "vue"
import { useRouter } from "vue-router"

export default {
    setup() {
        let state = reactive({
            listData: [1, 2, 3, 4, 5, 6],
            images: [
                "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
                "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
            ],
            msg: "",
            menu: [
                {
                    title: "周报专区",
                    list: [
                        {
                            title: "4G满意度周报",
                            type: 8,
                            img: "wx_icon_ddrb.png"
                        },
                        {
                            title: "宽带品质提升周报",
                            type: 9,
                            img: "wx_icon_yxgl.png"
                        },
                        {
                            title: "营业厅及外呼营销服务质量周报",
                            type: 10,
                            img: "wx_icon_plts.png"
                        },
                        {
                            title: "5G服务质量周报",
                            type: 11,
                            img: "wx_icon_yxgl.png"
                        }
                    ]
                },
                {
                    title: "信息共享",
                    list: [
                        {
                            title: "客户声音",
                            type: 0,
                            img: "wx_icon_ywxs.png"
                        },
                        {
                            title: "服务标准",
                            type: 12,
                            img: "wx_icon_fwbz.png"
                        },
                        {
                            title: "经验分享",
                            type: 13,
                            img: "wx_icon_jy.png"
                        },
                        {
                            title: "服务宣传",
                            type: 14,
                            img: "wx_icon_fwxc.png"
                        },
                        {
                            title: "流程案例分享",
                            type: 15,
                            img: "wx_icon_lcal.png"
                        }
                        /* {
              title: '工信部测评数据',
              type: 'gxbcpsj',
              img: 'wx_icon_rxpzts.png',
          },*/
                    ]
                },
                {
                    title: "流程管控",
                    list: [
                        {
                            title: "工单审批",
                            type: "orderPage",
                            img: "wx_icon_ddrb.png"
                        }
                    ],
                    tableList: []
                }
            ]
        })
        const getAssetsFile = (url) => {
            return new URL(`../../../assets/icon/${url}`, import.meta.url).href
        }
        getUserRole()
        // const title = ['周报专区','信息共享','投诉监控调度'];
        // const menu = ;
        const router = useRouter()

        // function toList(type) {
        //   router.push({
        //     name: 'micro-list',
        //     params: {type: type}
        //   })
        // }
        function getUserRole() {
            GetNetUtil.requestPost("/gxb/selectUserRole", "", "", getUserRole)
            function getUserRole(resp) {
                if (resp.resultCode === "200") {
                    if (null != resp.data) {
                        if (resp.data == "0") {
                            state.menu[1].list.push({
                                title: "工信部测评数据",
                                type: "gxbcpsj",
                                img: "wx_icon_rxpzts.png"
                            })
                        }
                    }
                } else {
                    console.log("查询用户权限出错", resp)
                }
            }
        }
        function toList(type) {
            if (type == "orderPage") {
                router.push({
                    name: "micro-orderPage",
                    params: { type: type }
                })
            } else if (type == "gxbcpsj") {
                router.push({
                    name: "evaluation-data",
                    params: { type: type }
                })
            } else {
                router.push({
                    name: "micro-list",
                    params: { type: type }
                })
            }
        }

        const onClickLeft = () => history.back()
        return {
            ...toRefs(state),
            onClickLeft,
            getUserRole,
            toList,
            getAssetsFile
        }
    }
}
</script>

<style lang="scss" scoped>
.homes {
    width: 100%;
    height: 100%;
    background: #f2f4f5;
    overflow: hidden;

    .nav-right {
        font-size: 8px;
        color: #ffffff;
    }

    .contents {
        width: 100%;
        background: #f2f4f5;
        height: calc(100% - 44px);
        overflow-y: auto;
    }

    .swipe {
        height: 170px;
        width: 100%;
        background-color: #ffffff;

        .swipe-img {
            margin: 10px;
            height: 150px;
            width: calc(100% - 20px);
            object-fit: fill;
            border-radius: 5px;
        }
    }

    .marquee-back {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;

        .marquee {
            height: 30px;
            display: flex;
            align-items: center;
            overflow: hidden;

            .paomadeng {
                width: 100%;
                margin: 10px;
                font-size: 10px;
            }
        }

        .icon {
            margin: 10px;
        }
    }

    .section-item {
        display: flex;
        flex-wrap: wrap;
        background-color: #ffffff;
        width: 100%;
        padding-bottom: 5px;
        .item {
            width: 25%;
            // margin: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;

            .img {
                margin-top: 10px;
                background: url("../../../assets/icon/wx_icon_plts.png")
                    no-repeat 0 0;
                background-size: 100% 100%;
                width: 44px;
                height: 44px;
                // background-color: red;
            }

            .title {
                //margin: 5px;
                font-size: 14px;
                text-align: center;
            }
        }
    }
}
</style>